﻿<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_Menu" Codebehind="Menu.ascx.cs" %>
<%@ Register Src="~/Controls/ShopOnline/MyMenuBar.ascx" TagName="MyMenuBar" TagPrefix="uc" %>

<style type="text/css">
    .emptyMessage
    {
        color:Gray;
        font-style:italic;
    }
</style>

<script type="text/javascript">
   function initMenu() {
       var _self = $('#<%= txtSearch.ClientID %>');

       $(_self).blur(function () {
            if ($(this).val() == '')
                $(this).val($(_self).attr('emptymessage')).addClass('emptyMessage');
        });

        $(_self).focus(function () {
            if ($(this).val() == $(_self).attr('emptymessage'))
                $(this).val('').removeClass('emptyMessage');
        });

        $(_self).keydown(function (event) {
            if (event.keyCode == 13) {
                if ($(this).val() != $(_self).attr('emptymessage'))
                    $('#<%=btnsearch.ClientID %>').click();
                return false;
            }
        });

        $(_self).blur();
    }
</script>

<div class="menu-block">
    <div class="top-corners">
        &nbsp;</div>
    <div class="content">
        <div class="layer-2">
            <div class="form-search">
                <label for="search">
                    Search:</label>
                <div class="input-bg">
                    <asp:TextBox ID="txtSearch" emptymessage="Type a keyword" runat="server" class="input-text" ></asp:TextBox>
                </div>
                <button runat="server" onserverclick="btnSearch_OnClick" type="button" title="Search" class="button" id='btnsearch'>
                    <span><span>Search</span></span></button>
                <div id="search_autocomplete" class="search-autocomplete">
                </div>
            </div>
            <div class="nav-container">
                <uc:MyMenuBar ID="menu" runat="server"/>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
    <div class="bot-corners">
        &nbsp;</div>
</div>
